<template>
    <div class="productDetail">
        <div class="productNav">
            <div class="container">
                <div class="product_path">
                    <ol class="breadcrumb">
                        <li class="breadcrumb_icon el-icon-shopping-cart-1"></li>
                        <li class="breadcrumb_link"><a @click="inProductList">产品中心</a></li>
                        <li class="breadcrumb_link"><a @click="inProductList">{{PRODUCT_TYPE | optionObjectKV(this.product.typeId)}}</a></li>
                        <li class="active">产品详情</li>
                    </ol>
                </div>
            </div>
        </div>

        <div class="detailContent container">
            <el-row>
                <el-col :xs="24" :sm="10" :md="10" :lg="8">
                    <el-card :body-style="{ padding: '0px' }">
                        <img id="bigImg" :src="bigImg" class="pro_pic_first image">
                        <div class="pro_pic_list_box" >
                            <el-button class="pro_pic_list_previous el-icon-caret-left" disabled></el-button>

                            <!--点击按钮，移动UL-->
                                <ul class="pro_pic_list" v-for="(img) in picList" :key="img.index">
                                    <li><img :src="img" @click="img1(img)"/></li>
                                </ul>
                            <el-button class="pro_pic_list_next el-icon-caret-right"></el-button>
                        </div>
                    </el-card>
                </el-col>
                <el-col :xs="24" :xm="14" :md="14" :log="16">
                    <div class="pro_intro_content">
                        <el-tag class="pro_intro_title "  type="danger">
                            <span class="ce_icon ce_icon_E901">厂家直供</span>
                            <span class="ce_icon ce_icon_E907">正品保障</span>
                            <span class="ce_icon ce_icon_E904">放心购物</span>
                            <span class="ce_icon ce_iconn_E903">送货上门</span>
                            <span class="ce_icon ce_icon_E906">售后保障</span>
                        </el-tag>
                        <h1>{{this.product.name}}</h1>
                        <h2>{{this.product.seoDescription}}</h2>
                        <div class="pro_intro_title_line"></div>
                        <div class="pro_intro_price">
                            <div class="pro_intro_price_left">
                                <el-button class="leftBTN" type="warning">原价</el-button>
                                <span class="oldPrice">{{this.product.price}} ￥</span>
                            </div>
                            <div class="pro_intro_price_right">
                                <el-button class="rightBTN" type="danger">会员价</el-button>
                                <span class="memberPrice">{{this.product.memberPrice}} ￥</span>
                            </div>
                        </div>
                        <div class="pro_intro_buy">
                            <span class="buy_desc">购买数量：</span>
                            <el-input-number class="buy_num" v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                            <span class="buy_unit">箱/件</span>
                        </div>
                        <div class="pro_intro_go">
                            <el-button class="leftBTN el-icon-shopping-bag-1" type="danger" @click="toShop">前往微信商城购买</el-button>
                            <el-button class="rightBTN ce_icon ce_icon_tel" type="danger">咨询客服购买</el-button>
                        </div>
                    </div>

                </el-col>
            </el-row>
            <div class="pro_content">
                <el-divider>
                    <div class="contentBox">
                        <i class="contentIcon el-icon-files"></i>产品详情
                    </div>

                </el-divider>
                <!--vue直接绑定v-html，显示html内容-->
                <div v-html="product.productContent"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ProductDetail",
        data(){
            return{
                message:"产品详情页",
                num: 1,
                disabled:false,
                picList:[],
                product:{},
                bigImg:"/base/imgs/product/BG-wine-1.jpg",
                PRODUCT_TYPE: PRODUCT_TYPE,
            }
        },
        mounted() {
            //获取视口
            this.getWidth();
            if(Tool.isNotEmpty(this.$route.params.item)){
                this.product=this.$route.params.item;
                this.picList=this.product.picList;
                this.bigImg=this.picList[0];
            }else{
                this.product=SessionStorage.get(PRODUCT);
                this.picList=this.product.picList;
                this.bigImg=this.picList[0];
            }
        },
        methods:{
            img1(img){
                this.bigImg=img;
            },
            getWidth: function () {
                let previousBtn = document.querySelectorAll(".productDetail .detailContent .pro_pic_list_box .pro_pic_list_previous")[0];
                let nextBtn = document.querySelectorAll(".productDetail .detailContent .pro_pic_list_box .pro_pic_list_next")[0];
                /*图片ul*/
                let proPicList = document.querySelectorAll(".productDetail .detailContent .pro_pic_list_box .pro_pic_list li img");
                /*大图*/
                let bigImg = document.getElementById("bigImg");
                let bigImgSrc=document.getElementById("bigImg").src;
                for (let i = 0; i < proPicList.length; i++) {
                    $(".productDetail .detailContent .pro_pic_list_box .pro_pic_list li img").hover(function () {
                        bigImg.src = this.src;
                    }, function () {
                        bigImg.src=bigImgSrc;
                    });
                }

                let imgs = document.querySelectorAll(".pro_pic_list > li >img");
                let imgsLis = document.querySelectorAll(".pro_pic_list > li");
                let proIntro = document.querySelectorAll(".pro_intro_content > .pro_intro_title");
                let proIntroTitle = document.querySelectorAll(".pro_intro_content > .pro_intro_title > span")
                let proIntroContent = document.querySelectorAll(".pro_intro_content")[0];
                let rightBTN = document.querySelectorAll(".productDetail .detailContent .pro_intro_content .pro_intro_go .rightBTN")[0];
                let introLine = document.querySelectorAll(".productDetail .detailContent .pro_intro_content .pro_intro_title_line")[0];
                let rightBox = document.querySelectorAll(".productDetail .detailContent .pro_intro_content .pro_intro_price")[0];
                let rightPrice = document.querySelectorAll(".productDetail .detailContent .pro_intro_content .pro_intro_price div");
                let rightCount = document.querySelectorAll(".productDetail .detailContent .pro_intro_content .pro_intro_buy")[0];
                //新价格
                let rightPriceBox=document.querySelectorAll(".productDetail .detailContent .pro_intro_content .pro_intro_price .pro_intro_price_right");

                $(window).on("resize", function () {

                    let wid = $(window).width();
                    if (wid >= 1200) {
                        console.log("欢迎进入亚盟电商平台官网，ceevnt提供技术支持");
                    } else if (wid > 992 && wid < 1200) {
                        for (let i = 0; i < proIntroTitle.length; i++) {
                            proIntroTitle[i].style.fontSize = "16px";
                        }
                        rightBTN.style.marginLeft = "0";
                    } else if (wid < 992 && wid >= 768) {
                        for (let i = 0; i < imgs.length; i++) {
                            imgs[i].style.width = "45px";
                            imgs[i].style.height="45px";
                            imgsLis[i].style.width = "45px";
                            imgsLis[i].style.margin="5px 2px";
                            proIntroTitle[i].style.fontSize = "23px";
                            proIntroTitle[i].style.marginRight = "12px";
                            proIntroTitle[i].innerHTML = "";
                        }
                        for (let i = 0; i < proIntroTitle.length; i++) {
                            proIntroTitle[i].style.fontSize = "23px";
                            proIntroTitle[i].style.marginRight = "12px";
                            proIntroTitle[i].innerHTML = "";
                        }
                        for (let i = 0; i < rightPrice.length; i++) {
                            rightPrice[i].style.width = "100%";
                            rightPrice[i].style.marginBottom = "20px";
                        }
                        proIntroContent.style.marginLeft = "0";
                        proIntroContent.style.marginTop = "10px";
                        introLine.style.width = "300px";
                        introLine.style.top = "160px";
                        rightBox.style.width = "300px";
                        rightCount.style.width = "100%";
                    } else if (wid < 768) {
                        /*for (let i = 0; i < imgs.length; i++) {
                            imgs[i].style.width = "55x";
                            imgs[i].style.height="55px";
                            imgsLis[i].style.width = "55px";
                            imgsLis[i].style.margin="2px 4px";
                            console.log("proIntroTitle-->: ",proIntroTitle);

                        }*/
                        for (let i = 0; i < proIntroTitle.length; i++) {
                            proIntroTitle[i].innerHTML = "";
                            proIntroTitle[i].style.fontSize = "23px";
                            proIntroTitle[i].style.margin= "0 15px";
                        }
                        for (let i = 0; i < rightPrice.length; i++) {
                            rightPrice[i].style.width = "100%";
                            rightPrice[i].style.marginBottom = "20px";
                            rightPrice[i].style.marginLeft = "0";
                        }
                        proIntro.style="margin-top:5px";
                        proIntroContent.style.marginLeft = "15px";
                        proIntroContent.style.marginTop = "10px";
                        introLine.style.width = "300px";
                        introLine.style.top = "160px";
                        rightBox.style.width = "300px";
                        /*rightPriceBox.style="float:left";*/
                        rightCount.style.width = "100%";
                    }
                }).trigger("resize");
            },
            /*购物计数器*/
            handleChange(value) {
                console.log("欢迎进入亚盟电商平台官网，ceevnt提供技术支持");
            },
            inProductList(){
              this.$router.push("list");
            },
            toShop(){
                if(Tool.isEmpty(this.product.path)){
                    this.$message({
                       showClose:true,
                       message:'当前产品未添加微信跳转URL，请联系后台人员',
                       type:'warning'
                    });
                }else{
                 Tool.toLink(this.product.path);
                }
            },
        }
    }
</script>

<style scoped>
    /*产品导航*/
    .productDetail .productNav {
        background-color: #f5f5f5;
    }
    .productDetail .productNav .product_path .breadcrumb li a{
        text-decoration: none;
        cursor: pointer;
    }
    /*面包屑导航设置*/
    .productDetail .productNav .product_path .breadcrumb {
        line-height: 40px;
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .productDetail .productNav .product_path .breadcrumb_icon {
        float: left;
        text-align: center;
        width: 40px;
        height: 40px;
        font-size: 35px;
        color: #fff;
        margin-right: 10px;
        border-radius: 5px;
        background-color: #e92322;
    }

    .productDetail .productNav .product_path .breadcrumb_link {
        font-size: 15px;
        display: inline-block;
        cursor: pointer;
    }

    .productDetail .productNav .product_path .breadcrumb_link a {
        font-size: 15px;
        text-decoration: none;
    }

    .productDetail .productNav .product_path .breadcrumb_link a:hover,
    .productDetail .productNav .product_path .breadcrumb_link a:focus {
        color: #e92322;
    }
    /*产品详情头部图*/
    .productDetail .detailContent{
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .productDetail .detailContent .pro_pic_first {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    .productDetail .detailContent .pro_pic_list_box{
        height: 60px;
        /*overflow: hidden;*/
        margin-top: 10px;
        position: relative;
    }
    .productDetail .detailContent .pro_pic_list_box .pro_pic_list_previous{
        float: left;
        padding: 20px 3px;
        line-height: 15px;
        margin-left: 5px;
    }
    .productDetail .detailContent .pro_pic_list_box .pro_pic_list_previous:hover,
    .productDetail .detailContent .pro_pic_list_box .pro_pic_list_previous:focus{
        color: #e92322;
        border: 1px solid #e92322;
        background-color: rgba(233,35,34,.1);
    }
    .productDetail .detailContent .pro_pic_list_box .pro_pic_list_next{
        float: right;
        position: absolute;
        padding: 20px 3px;
        top: 0;
        right: 5px;
        z-index: 10;
    }
    .productDetail .detailContent .pro_pic_list_box .pro_pic_list_next:hover,
    .productDetail .detailContent .pro_pic_list_box .pro_pic_list_next:focus{
        color: #e92322;
        border: 1px solid #e92322;
        background-color: rgba(233,35,34,.1);
        background: #ffffff;
    }
    .productDetail .detailContent .pro_pic_list_box .pro_pic_list{
        text-decoration: none;
        list-style: none;
        height: 60px;
        display: inline-block;
        /*width: 320px;
        overflow: hidden;
        display: inline-block;*/
    }
    .productDetail .detailContent .pro_pic_list_box .pro_pic_list li{
        float: left;
        width: 60px;
        text-align: center;
        margin: 0 2.5px ;
    }
    .productDetail .detailContent .pro_pic_list_box .pro_pic_list li img{
        width: 60px;
        height: 60px;
        padding: 1px;
        border: 1px solid #CECFCE;
        cursor: pointer;
    }
    .productDetail .detailContent .pro_pic_list_box .pro_pic_list li img:hover,
    .productDetail .detailContent .pro_pic_list_box .pro_pic_list li img:focus{
        border: 1px solid #e92322;
    }
    /*右侧信息栏*/
    .productDetail .detailContent{
        position: relative;
    }
    .productDetail .detailContent .pro_intro_content{
        margin-left: 20px;
        position: relative;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_title {
        font-size: 20px;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_title span::before{
        margin-right: 10px;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_title span{
        margin: 0 10px;
        display: inline-block;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_title_line{
        width: 104%;
        height: 2px;
        border-bottom: 2px dashed rgba(233,35,34,.1);
        position: absolute;
        top: 160px;
        bottom: 0;
    }
    /*价格*/
    /deep/ .el-button+.el-button{
        margin-left: 0;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_price{
        margin-top: 40px;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_price .pro_intro_price_left{
        float: left;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_price .pro_intro_price_left .leftBTN{
        border-radius: 0;
        padding: 15px 40px;
        margin-right: 10px;
        font-size: 20px;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_price .pro_intro_price_left .oldPrice{
        font-size: 20px;
        text-decoration: line-through;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_price .pro_intro_price_right{
        margin-left: 250px;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_price .pro_intro_price_right .rightBTN{
        border-radius: 0;
        padding: 15px 40px;
        margin-right: 10px;
        font-size: 20px;
        background-color: #e92322;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_price .pro_intro_price_right .rightBTN:hover,
    .productDetail .detailContent .pro_intro_content .pro_intro_price .pro_intro_price_right .rightBTN:focus{
        background-color: rgb(252, 66, 65);
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_price .pro_intro_price_right .memberPrice{
        font-size: 24px;
        display: inline-block;
        color: #e92322;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_buy{
        display: inline-block;
        margin-top: 30px;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_buy .buy_desc{
        margin-right: 10px;
        font-size: 18px;
        color: #777;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_buy .buy_num{
        color: #e92322;
        border-color: #e92322;
    }

    .productDetail .detailContent .pro_intro_content .pro_intro_buy .buy_num:hover,
    .productDetail .detailContent .pro_intro_content .pro_intro_buy .buy_num:focus{
        color: #e92322;
        border-radius: 4px;
        border-color: #e92322;
    }

    .productDetail .detailContent .pro_intro_content .pro_intro_buy .buy_unit{
        margin-left: 10px;
        font-size: 18px;
        color: #777;
    }
    /*咨询购买*/
    .productDetail .detailContent .pro_intro_content .pro_intro_go{
        margin-top: 30px;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_go .leftBTN{
        border-radius: 0;
        padding: 15px 40px;
        margin-right: 10px;
        font-size: 24px;
        background-color: #e92322;
        margin-bottom: 20px;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_go .leftBTN:hover,
    .productDetail .detailContent .pro_intro_content .pro_intro_go .leftBTN:focus{
        background-color: rgb(252, 66, 65);
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_go .leftBTN::before{
        color: white;
        margin-right: 10px;
        font-size: 20px;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_go .rightBTN{
        border-radius: 0;
        padding: 15px 40px;
        margin-right: 10px;
        font-size: 24px;
        background-color: #e92322;
        margin-bottom: 20px;
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_go .rightBTN:hover,
    .productDetail .detailContent .pro_intro_content .pro_intro_go .rightBTN:focus{
        background-color: rgb(252, 66, 65);
    }
    .productDetail .detailContent .pro_intro_content .pro_intro_go .rightBTN::before{
        margin-right: 10px;
        font-size: 20px;
    }
    /*详情标题样式*/
    .contentBox{
        background: #E6A23C;
        padding: 5px 20px;
        font-size: 16px;
        color: #ffffff;
        border-radius: 5px ;
    }
    .contentBox .contentIcon{
        margin-right: 10px;
    }
</style>